<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="学习记事本">
      <template #right>
        <van-icon name="wap-nav" size="20" @click="addLeft" />
      </template>
    </van-nav-bar>
    <!-- layout布局 -->
    <Top @addPut="addPut" />
    <!-- tab布局 -->
    <van-tabs v-model="isFlag" @click="addName">
      <van-tab title="未完成" name="a"> </van-tab>
      <van-tab title="已完成" name="b"> </van-tab>
      <van-tab title="已取消" name="c"> </van-tab>
    </van-tabs>
    <!-- 留言列表区域 -->

    <div v-for="(item, index) in $store.state.list" :key="index">
      <van-row
        type="flex"
        align="center"
        style="padding: 10px 0"
        v-if="item.isFlag == isFlag"
      >
        <van-col span="1"> </van-col>
        <van-col span="2">
          <van-checkbox
            v-model="item.checked"
            v-if="item.isFlag != 'c'"
            @click="addChe(index)"
          ></van-checkbox>
        </van-col>
        <van-col span="16">
          <span @click="addisEd(index)" v-show="item.isEd == false">{{
            item.title
          }}</span>
          <!-- 编辑框 -->
          <input
            type="text"
            v-model="item.title"
            v-show="item.isEd == true"
            @blur="addisEd(index)"
            v-focus
          />
        </van-col>
        <van-col span="5">
          <van-button
            type="warning"
            size="mini"
            v-if="item.isFlag == 'a'"
            @click="addQx(index)"
            >取消</van-button
          >
          <span v-if="item.isFlag == 'b'">{{ item.time | time }}</span>
          <van-button
            type="warning"
            size="mini"
            v-if="item.isFlag == 'c'"
            @click="addDel(index)"
            >删除</van-button
          >
        </van-col>
      </van-row>
    </div>
    <!-- 遮罩层 -->
    <van-overlay :show="show" @click.native="addLeft">
      <div class="wrapper">
        <div class="block" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import Top from "./top";
export default {
  name: "",
  props: [],
  //注册组件
  components: {
    Top,
  },
  data() {
    return {
      isFlag: "a",
      show: false,
    };
  },
  // 在实例创建完成后被立即调用最早开始使用 data和methods中数据的钩子
  created() {},
  //挂载完成，HTML已经被渲染到了页面上，这个阶段可以执行dom操作，可以进行数据请求
  mounted() {},
  //方法
  methods: {
    addName(name, title) {
      console.log(name, title);
    },
    addPut(title) {
      if (title == "") {
        this.$toast.fail("请先输入内容");
        return false;
      }
      let obj = {
        title: title, //输入的内容
        isFlag: "a", //tab的状态
        checked: false, //复选框的状态
        isEd: false,
        time: new Date().getTime(), //获取当前的时间戳
      };
      this.$store.commit("addPut", obj);
      this.$toast.success("添加成功");
    },
    addChe(index) {
      this.$store.commit("addChe", index);
    },
    addQx(index) {
      this.$store.commit("addQx", index);
    },
    addDel(index) {
      this.$store.commit("addDel", index);
    },
    addisEd(index) {
      this.$store.commit("addisEd", index);
    },
    addLeft() {
      console.log(this.show)
      this.show = !this.show;
    },
  },
  //计算属性
  computed: {},
  //监听器
  watch: {},
  //自定义指令
  directives: {
    focus: {
      componentUpdated(el, binding) {
        console.log("指令触发");
        el.focus();
      },
    },
  },
  filters: {
    time(val) {
      // 年月日格式化
      let year = new Date(val).getFullYear();
      let month = new Date(val).getMonth() + 1;
      let day = new Date(val).getDate();
      return `${year}/${month.toString().padStart(2, "0")}/${day
        .toString()
        .padStart(2, "0")}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.van-nav-bar {
  background: pink;
}
.van-field {
  border: #ccc;
}
.wrapper {


  height: 100%;
}

.block {
  width: 250px;
  height: 100%;
  background-color: #fff;
}
</style>
